
h3,
p { 
    text-align: center; 
}

.wrapper {
    margin: 25px auto;
}

.props {
    color: blue;
}

.axis {
    color: green;
}

.container {
    display: flex;
    margin: auto;
}

.item:nth-child(2n) {
    background: #ffff00;
}

.item:nth-child(2n+1) {
    background: #dfdfdf;
}

.first.container {
    flex-flow: row nowrap;
    width: 600px;
    border: 1px solid blue;
}

.first>.item {
    flex-basis: 100px;
}

.first>.item:nth-child(1){
    flex-grow: 2;
}

.first>.item:first-child~*{
    flex-grow: 1;
}

.second.container {
    flex-flow: row nowrap;
    width: 600px;
    border: 1px solid blue;
}

.second>.item {
    flex-basis: 300px;
}

.second>.item:nth-child(1){
    flex-shrink: 2;
}

.second>.item:first-child~*{
    flex-shrink: 1;
}

.third.container {
    flex-flow: row wrap;
    width: 600px;
    height: 200px;
    border: 1px solid blue;
}

.third>.item {
    flex-basis: 200px;
}

.third>.item:nth-child(1){
    flex-shrink: 2;
}

.third>.item:first-child~*{
    flex-shrink: 1;
}

.fourth.container {
    flex-flow: column nowrap;
    width: 600px;
    height: 300px;
    border: 1px solid blue;
}

.fourth>.item {
    flex-basis: 100px;
}

.fourth>.item:nth-child(1){
    flex-shrink: 2;
}

.fourth>.item:first-child~*{
    flex-shrink: 1;
}

.fifth.container {
    flex-flow: column wrap;
    width: 600px;
    height: 300px;
    border: 1px solid blue;
}

.fifth>.item {
    flex-basis: 100px;
}

.fifth>.item:nth-child(1){
    flex-shrink: 2;
}

.fifth>.item:first-child~*{
    flex-shrink: 1;
}

.sixth.container {
    flex-flow: column nowrap;
    width: 600px;
    height: 300px;
    border: 1px solid blue;
}

.sixth>.item:nth-child(1){
    flex: 2 2 100px;
}

.sixth>.item:first-child~*{
    flex: 1 1 100px;
}